import Vue, {
  compiler
} from './src/platforms/web/entry-runtime-with-compiler'

Vue.component('button-counter', {
  data: function () {
    return {
      num: 0
    }
  },
  render(h) {
    var button = <button onClick={this.someFn}>{this.num}</button>
    return button
    // return h('button', {
    //   on: {
    //     click: this.someFn
    //   }
    // }, this.num + '次尝试');
  },
  methods: {
    someFn() {
      this.num++
    }
  }
})

new Vue({
  el: '#app',
  data: {
    msg: 'hello'
  },
  render(h) {
    return (
      <div>
        {this._c('button-counter')}
        <span>{this.msg}</span>
      </div>
    )
    // return h('div', {}, [
    //   this._c('button-counter'),
    //   h('span', {}, this.msg)
    // ]);
  }
})

// let vm = new Vue({
//   el: '#app',
//   data: {
//     title: 'prev',
//     num: 1,
//     deep: {
//       num: 1
//     },
//     watchMsg: 'init msg'
//   },
//   watch: {
//     num(newVal, oldVal) {
//       this.watchMsg = newVal + 'apples'
//     }
//   },
//   computed: {
//     computedNum() {
//       return this.num * 10
//     }
//   },
//   render(h) {
//     return h('div', [
//       h('button', {
//         on: {
//           click: this.someFn
//         }
//       }, this.watchMsg),
//       h('button', {
//         on: {
//           click: this.someFn2
//         }
//       }, this.deep.num)
//     ])
//   },
//   methods: {
//     someFn() {
//       this.num++
//     },
//     someFn2() {
//       this.deep.num++
//     }
//   }
// })